<style>
    .yw-search{
        position: relative;
    }
    .yw-search input {
        padding-right: 100px;
    }
    .yw-search button {
        position: absolute;
        top: 0;
        right: 0;
    }
</style>
<div class="layui-tab layui-tab-brief tool-tab" lay-filter="tool-tab">
    <ul class="layui-tab-title text-center">
        <li class="layui-this">{$tool_info.title}</li>
    </ul>
    <div class="layui-tab-content">
        <div class="layui-tab-item layui-show">
            <div class="layui-row">
                <div class="layui-col-sm12 layui-col-md8 layui-col-md-offset2">
                    <blockquote class="layui-elem-quote tools-title">
                        <p>说明：</p>
                        <ol>
                            <li>文件将在10分钟后自动删除！请注意保存。</li>
                            <li>图片格式请直接右击另存为就可以保存。</li>
                            <li>视频格式请点击视频控制界面的<span style="margin: 0 10px"><i class="fa fa-ellipsis-v"></i></span>会有下载按钮。</li>
                        </ol>
                    </blockquote>
                    <form action="">
                        <div class="yw-search">
                            <input type="text" name="url" value="https://www.instagram.com/p/CN4s6eRnsaa/?igshid=axc6piukelov" class="layui-input" placeholder="请输入要获取的url">
                            <button type="button" class="layui-btn layui-btn-normal"><i class="layui-icon layui-icon-search"></i> 获取</button>
                        </div>
                    </form>
                    <div class="layui-card">
                        <div class="layui-card-header">
                            返回结果
                        </div>
                        <div class="layui-card-body" id="show_rs">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    layui.use(['jquery', 'layer'], function () {
        var $ = layui.jquery,
            l = layui.layer;

        $('.yw-search button').on('click', function () {
            var filed = {};
            filed.url = $('input[name="url"]').val();
            var load = layer.load(2);
            $.post('https://api.wjssk.ga/insmedia', filed, function (rs) {
                layer.close(load);
                if (rs.code === 1001) {
                    if (rs.type === 'image') {
                        $('#show_rs').html('<img id="" src="'+rs.src+'" style="width: 100%" />');
                    } else if (rs.type === 'video') {
                        var str = '<video controls ="" autoplay="" name="media" style="width: 100%">';
                        str += '<source src="'+rs.src+'" type="video/mp4">';
                        str += '</video>';
                        $('#show_rs').html(str);
                    }
                } else {
                    layer.alert(rs.msg);
                }
            },
            'json');
        });
    });
</script>